import * as echarts from 'echarts';
import React, { useRef, useEffect } from 'react';

export default function EchartsBase() {
    const ref = useRef(null);

    let echartsInstance = null;

    const renderEcharts = () => {
        const renderedMapInstance = echarts.getInstanceByDom(ref.current);
        if (renderedMapInstance) {
            echartsInstance = renderedMapInstance;
        } else {
            echartsInstance = echarts.init(ref.current);
        }
        echartsInstance.setOption(
            {
                title: {
                    text: 'ECharts 入门示例'
                },
                tooltip: {},
                xAxis: {
                    data: ['数据1', '数据2', '数据3', '数据4', '数据5', '数据6']
                },
                yAxis: {},
                series: [
                    {
                        name: '销量',
                        type: 'bar',
                        data: [5, 20, 36, 10, 10, 20]
                    }
                ]
            }
        );
    };

    useEffect(() => {
        renderEcharts();
    }, []);

    useEffect(() => {
        window.onresize = function () {
            echartsInstance.resize();
        };
        return () => {
            echartsInstance && echartsInstance.dispose();
        };
    }, []);

    return (
        <div>
            <h1>echarts基本使用</h1>
            <div id="echarts_base" style={{ width: "100%", height: "500px" }} ref={ref}></div>
        </div>
    )
}
